<template>
  <div class="tag-record-user-detail">
    <el-card>
      <tag-content-header>
        <template #title>
          <span class="title-text">访问详情</span>
        </template>
      </tag-content-header>
      <div class="record-user-option">
        <el-radio-group v-model="dateType" size="mini" @change="dateTypeChange">
          <el-radio-button :label="1">今天</el-radio-button>
          <el-radio-button :label="2">昨天</el-radio-button>
          <el-radio-button :label="3">最近7天</el-radio-button>
          <el-radio-button :label="4">最近30天</el-radio-button>
        </el-radio-group>
        <el-date-picker
          v-model="dateTime"
          type="daterange"
          size="mini"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :clearable="false"
          @change="timeChange"
        >
        </el-date-picker>
      </div>
      <div class="record-user-chart-box" v-loading="loading">
        <div class="record-user-chart" id="record-user-chart"></div>
      </div>
      <table-module ref="tableModule" @refresh="refreshChart"></table-module>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import tableModule from './record-user-detail-table'
export default {
  components: {
    tableModule
  },
  data() {
    return {
      loading: false,
      dateType: 1,
      dateTime: '',
      chartObj: null
    }
  },
  created() {
    this.dateTypeChange()
  },
  methods: {
    getData() {
      var params = {
        startDate: this.dateTime[0],
        endDate: this.dateTime[1]
      }
      this.getChart(params)
      this.getTable(params)
    },
    getChart(params) {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysOperateRecord/visitTop10UsersTrend'),
        method: 'get',
        params: this.$ajax.setParams(params),
        timeout: 0
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.setChart(data.data)
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    getTable(params) {
      this.$refs.tableModule.getTable(params)
    },
    setChart(data) {
      if (!this.chartObj) {
        this.chartObj = echarts.init(document.getElementById('record-user-chart'))
        window.addEventListener('resize', () => {
          this.chartObj.resize()
        })
      }
      this.chartObj.resize()
      this.chartObj.setOption(this.getChartOption(data), true)
    },
    getChartOption(data) {
      var legend = []
      var series = []
      var pieData = []
      data.lineData.lineValue.forEach(item => {
        legend.push(item.loginUname)
        series.push({
          name: item.loginUname,
          type: 'line',
          data: item.visitNum,
          symbol: 'circle',
          symbolSize: 6
        })
      })
      data.pieData.forEach((item, index) => {
        let d = {
          name: item.loginUname,
          value: item.visitNum
        }
        if (index === data.pieData.length - 1) {
          d.name = '其他'
        }
        if (d.name !== '其他' || d.value !== 0) pieData.push(d)
      })
      series.push({
        name: '浏览量（PV）',
        type: 'pie',
        radius: ['30%', '50%'],
        center: ['15%', '35%'],
        label: {
          formatter: '{d}%'
        },
        data: pieData,
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{a}:{c}<br/>占比:{d}%'
        }
      })
      var option = {
        tooltip: {
          trigger: 'axis',
          confine: true
        },
        legend: {
          data: legend,
          bottom: 0,
          left: 'center'
        },
        grid: {
          top: 30,
          right: 40,
          bottom: 80,
          left: '35%',
          containLabel: true
        },
        color: [
          '#4fa8f9',
          '#6ec71e',
          '#f56e6a',
          '#fc8b40',
          '#818af8',
          '#31c9d7',
          '#f35e7a',
          '#ab7aee',
          '#14d68b',
          '#3d48e6',
          '#edb00d'
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.lineData.key,
          axisLine: {
            lineStyle: {
              color: '#dedede'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#333'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#dedede'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#333'
          }
        },
        series: series
      }
      return option
    },
    dateTypeChange() {
      var time = new Date().getTime()
      var start = ''
      var end = ''
      var utils = this.$utils
      switch (this.dateType) {
        case 1:
          end = start = utils.formatDateTime(new Date(time)).slice(0, 10)
          break
        case 2:
          end = start = utils.formatDateTime(new Date(time - 86400000)).slice(0, 10)
          break
        case 3:
          start = utils.formatDateTime(new Date(time - 86400000 * 6)).slice(0, 10)
          end = utils.formatDateTime(new Date(time)).slice(0, 10)
          break
        case 4:
          start = utils.formatDateTime(new Date(time - 86400000 * 29)).slice(0, 10)
          end = utils.formatDateTime(new Date(time)).slice(0, 10)
          break
      }
      this.dateTime = [start, end]
      this.$nextTick(() => {
        this.getData()
      })
    },
    timeChange() {
      this.dateType = ''
      this.getData()
    },
    refreshChart() {
      var params = {
        startDate: this.dateTime[0],
        endDate: this.dateTime[1]
      }
      this.getChart(params)
    }
  }
}
</script>

<style lang="scss">
.tag-record-user-detail {
  .tag-content-header {
    padding: 0 20px;
  }
  .record-user-option {
    padding: 0 20px;
    .el-date-editor {
      vertical-align: middle;
      margin: 0 30px;
    }
  }
  .record-user-chart-box {
    margin-top: 20px;
    padding: 0 20px;
    .record-user-chart {
      height: 300px;
      width: 100%;
    }
  }
  .record-user-detail-table {
    padding: 0 20px;
  }
}
</style>
